<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="keywords" content="web前端,web前端个人简历">
		<meta name="description" content="李中旭的web前端工程师个人简历">
		<title>web前端个人简历-李中旭</title>
        <link rel="stylesheet" href="css/jquery.circliful.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
        <div id="menu"><img src="images/menu0.png"><span>Click Me</span></div>
		<audio src="audio/bg.mp3" autoplay loop id="voice"></audio>
		<div class="music-container">
			<div class="music run"><img src="images/music_disk.png"></div>
			<div class="music-side play-bar"><img src="images/bar.png"></div>
		</div>
		<div id="container">
			<div class="page">
                <div class="head-pic"><img src="images/pic.jpg"></div>
                <h2><span class="fa fa-home"></span></h2>
                <div class="home-page">
                    <h1>你好，欢迎来到小旭的主页！</h1>
                    <p>我叫<strong> 李中旭 </strong>，是一个web前端工程师，热爱前端编程，能熟练运用HTML/CSS搭建静态网页，能运用原生JS和jQuery实现相关的交互效果，能用nodejs、Vue独立完成项目，如果你对我感兴趣，请“<b id="click-me">Click Me !</b>”继续了解我吧。</p>
                </div>
            </div>
            <div class="page">
                <h2><span class="fa fa-file-text"></span></h2>
                <div class="basic-information">
                    <ul>
                        <li><span class="fa fa-user"></span>李中旭</li>
                        <li><span class="fa fa-birthday-cake"></span>1992-06</li>
                        <li><span class="fa fa-mobile"></span><strong>18501368464</strong></li>
                        <li><span class="fa fa-envelope"></span><a href="mailto:983092598@qq.com">983092598@qq.com</a></li>
                        <li><span class="fa fa-github" style="color: #000;"></span>Jhoneshe</li>
                        <li><span class="fa fa-graduation-cap"></span>2011-2015 南昌航空大学 本科</li>
                        <li><span class="fa fa-pencil"></span>软件工程专业</li>
                        <li style="width: 100%"><span class="fa fa-book"></span>学习课程：C语言程序基础 / C++面向对象编程 / Java编程基础</li>
                        <li style="width: 100%"><span class="fa fa-hand-o-right"></span>后期学习了HTML、CSS、JavaScript、JQuery、Bootstrap、NodeJS、Vue等</li>
                    </ul>
                </div>
            </div>
            <div class="page">
                <h2><span class="fa fa-legal"></span></h2>
                <div class="skill">
                    <div class="skill-box">
                        <div id="myStat"
                             data-dimension="250"
                             data-text="80%"
                             data-info="HTML/CSS"
                             data-width="30"
                             data-fontsize="38"
                             data-percent="80"
                             data-fgcolor="#7ea568"
                             data-bgcolor="#eee"
                             data-fill="#ddd">
                        </div>
                    </div>
                    <div class="skill-box">
                        <div id="myStat2"
                             data-dimension="250"
                             data-text="70%"
                             data-info="Javascript"
                             data-width="30"
                             data-fontsize="38"
                             data-percent="70"
                             data-fgcolor="#47f"
                             data-bgcolor="#eee"
                             data-fill="#ddd">
                        </div>
                    </div>
                    <ul class="skill-list">
                    	<li><span class="fa fa-check-square-o"></span>熟练掌握html/css，能根据设计稿完成切图、布局、网页实现等工作</li>
						<li><span class="fa fa-check-square-o"></span>熟悉原生js和jQuery，实现页面的交互效果</li>
						<li><span class="fa fa-check-square-o"></span>熟悉Ajax请求的过程，能够通过请求后台数据（json）动态生成页面元素</li>
						<li><span class="fa fa-check-square-o"></span>熟悉bootstrap、vue、Nodejs</li>
                    </ul>
                </div>
            </div>
            <div class="page">
                <h2><span class="fa fa-star-o"></span></h2>
                <div class="experience">
                	<div class="w-container">
                		<ul class="works">
	                    	<li class="demo w-show">
	                    		<a href="https://jhoneshe.github.io/oshine/" target="_blank">
	                    			<img src="images/demo1.jpg">
	                    		</a>
	                    	</li>
	                    	<li class="demo">
	                    		<a href="https://jhoneshe.github.io/appWatch/" target="_blank">
	                    			<img src="images/demo2.jpg">
	                    		</a>
	                    	</li>
	                    	<li class="demo">
	                    		<a href="https://jhoneshe.github.io/lanka/" target="_blank">
	                    			<img src="images/demo3.jpg">
	                    		</a>
	                    	</li>
	                    	<li class="demo">
	                    		<a href="https://jhoneshe.github.io/calc/" target="_blank">
	                    			<img src="images/demo4.jpg">
	                    		</a>
	                    	</li>
                    	</ul>
                    	<span id="left-arrow" class="fa fa-arrow-circle-o-left"></span>
                		<span id="right-arrow" class="fa fa-arrow-circle-o-right"></span>
                	</div>
                	
                </div>
            </div>
            <div class="page">
                <h2><span class="fa fa-comments"></span></h2>
                <div class="connect">
                    <ul>
                        <li>
                        	<a href="tencent://message/?uin=983092598">
                        		<span class="fa fa-qq"></span>
                        	</a>
                        </li>
                        <li id="wechat">
                        	<a>
                        		<span class="fa fa-wechat"></span>
                        	</a>
                        	<span class="c-pic"></span>
                        </li>
                        <li>
                        	<a href="https://github.com/Jhoneshe" target="_blank">
                        		<span class="fa fa-github"></span>
                        	</a>
                        </li>
                    </ul>
                </div>
            </div>
		</div>
		
		<div id="side">
			<ul>
                <li class="current">首页</li>
                <li>基本资料</li>
                <li>相关技能</li>
                <li>我的demo</li>
                <li>联系我</li>
            </ul>
		</div>
		<script src="js/jquery-2.2.4.min.js"></script>
        	<script src="js/jquery.circliful.min.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
